<template>
	<div class="image-preview">
		<el-image
			v-if="imageList.length > 0"
			ref="clickImage"
			class="hide-image"
			src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
			:preview-src-list="imageList"
		/>
		<el-button :class="{ 'text-content': button.link }" :link="button.link" :type="button.type" :loading="loading" @click="viewPhoto">
			<slot>查看陈列照片</slot>
		</el-button>
	</div>
</template>
<script setup lang="ts" name="ImagePreview">
import { nextTick, ref } from 'vue';
import type { EpPropMergeType } from 'element-plus/es/utils';

interface Props {
	button?: {
		type: EpPropMergeType<StringConstructor, '' | 'default' | 'primary' | 'text' | 'success' | 'warning' | 'info' | 'danger', unknown> | undefined;
		text?: string;
		link: boolean;
	};
	data: any[];
}
// // 默认值
let props = withDefaults(defineProps<Props>(), {
	button: () => {
		return {
			type: 'default',
			link: false,
			text: '查看陈列照片',
		};
	},
	data: () => [],
});

const clickImage = ref();
const loading = ref<boolean>(false);
const imageList = ref<any[]>([]);

const viewPhoto = () => {
	loading.value = true;
	imageList.value = props.data;
	loading.value = false;

	nextTick(() => {
		if (clickImage.value) {
			setTimeout(() => {
				const imgRef = clickImage.value.$el.getElementsByClassName('el-image__preview')[0];

				imgRef.click();
			}, 50);
		}
	});
};
</script>

<style lang="scss" scoped>
.image-preview {
	position: relative;
	display: inline-block;
	margin: 0 10px;
	margin-bottom: 10px;
	vertical-align: middle;
	.hide-image {
		position: absolute;
		width: 100%;
		height: 100%;
		> .el-image__inner {
			opacity: 0;
		}
	}
	.text-content {
		width: 100%;
		white-space: normal;
	}
}
</style>
<style lang="scss">
.hide-image {
	> .el-image__inner {
		opacity: 0;
	}
}
</style>
